<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import { ref } from 'vue'
import { getStarUserIdAPI } from '~/api/houseStar'

const userString = localStorage.getItem('userInfo') as string
const user = JSON.parse(userString)
const stars = ref<any>([])
const activeName = ref('first')
const radio1 = ref('1')
const radio2 = ref('1')
const starsByPrice = ref<any>([])
const starsByStars = ref<any>([])

async function refreshData() {
  await getStarUserIdAPI(user.id).then((res: any) => {
    stars.value = res.result
  })
}
refreshData()

function handleRadio1(value: any) {
  if (value === '1') {
    starsByStars.value = stars.value.sort((a: any, b: any) => {
      return (b.stars - a.stars)
    })
  }
  else {
    starsByStars.value = stars.value.sort((a: any, b: any) => {
      return (a.stars - b.stars)
    })
  }
}

function handleRadio2(value: any) {
  if (value === '1') {
    starsByPrice.value = stars.value.sort((a: any, b: any) => {
      return (a.price - b.price)
    })
  }
  else {
    starsByPrice.value = stars.value.sort((a: any, b: any) => {
      return (b.price - a.price)
    })
  }
}

function handleClickTab(tab: TabsPaneContext) {
  if (tab.props.name === 'second') {
    starsByStars.value = stars.value.sort((a: any, b: any) => {
      return (b.stars - a.stars)
    })
  }
  else if (tab.props.name === 'third') {
    starsByPrice.value = stars.value.sort((a: any, b: any) => {
      return (a.price - b.price)
    })
  }
  else {
    refreshData()
  }
}
</script>

<template>
  <div class="main m-4 w-full">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClickTab">
      <el-tab-pane label="最新收藏" name="first">
        <el-scrollbar height="400px" class="w-full">
          <Star :data="stars" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="评分排序" name="second">
        <el-radio-group v-model="radio1" class="ml-4" @change="handleRadio1">
          <el-radio value="1" size="small">
            从高到低
          </el-radio>
          <el-radio value="2" size="small">
            从低到高
          </el-radio>
        </el-radio-group>
        <el-scrollbar height="400px" class="w-full">
          <Star :data="starsByStars" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="价格排序" name="third">
        <el-radio-group v-model="radio2" class="ml-4" @change="handleRadio2">
          <el-radio value="1" size="small">
            从低到高
          </el-radio>
          <el-radio value="2" size="small">
            从高到低
          </el-radio>
        </el-radio-group>
        <el-scrollbar height="400px" class="w-full">
          <Star :data="starsByPrice" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 0;
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/

// :deep(.el-tabs__active-bar) {
//   background-color: transparent !important;
// }
:deep(.el-tabs__nav-wrap::after) {
  position: static !important;
}

.main {
  width: 1000px;
}
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 {
  grid-area: 1 / 1 / 4 / 2;
}
.div2 {
  grid-area: 1 / 2 / 2 / 3;
}
.div3 {
  grid-area: 1 / 3 / 2 / 4;
}
.div4 {
  grid-area: 2 / 3 / 3 / 4;
}
</style>

<route lang="yaml">
  meta:
    layout: profile
  </route>
